<template>
    <!-- 包裹整个页面的div -->
    <div class="" id="login_box" >
        <div class="" v-show="isShow">
            <!-- 登录注册 -->
            <div class="">
                <ul class="login_box_title clearfix">
                    <router-link to="/" ><li><img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-back-white.png" alt=""></li></router-link>
                    <li class="login_box_title_lg">登录</li>
                    <router-link to="/Register" ><li class="login_box_title_register">注册</li></router-link>
                </ul>
            </div>
            <form id="login_box_loginUser">
                <div class="login_box_field">
                    <input class="input-left-margin" id="moblie_number" type="text" placeholder="请输入手机号码" ref="text" />

                    <input class="input-right-margin" id="login_password" type="password" placeholder="请输入您的密码" ref="psd"/>
                    <div class="forgot-password" @click="showStorage"><span id="login-forgot-password-btn">忘记密码?</span></div>
                </div>
                <div class="login_sBox">
                    <input type="submit" class="user-login" value="确定" @click="submit('changeLoginstate')">
                    </input>
                </div>

            </form>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                isShow : true,
                time : 5
            }
        },
        methods: {
            // 检索是否注册
            search(sto,stoval){
                let flag = false;
                for(let i=0;i<localStorage.length;i++){
                    //key(i)获得相应的键，再用getItem()方法获得对应的值
                    if ( sto == localStorage.key(i) && stoval == localStorage.getItem(
                            localStorage.key(i))) {
                        flag = true;
                    }
                }
                return flag;
            },
            // 提交帐号密码并将信息 存入localStorage
            submit(methodsname){
                let accounts = this.$refs.text.value;
                let psd = this.$refs.psd.value;
                let j = false;
                j = this.search(accounts,psd);
                if(j){
                    alert("登录成功！");
                    this.$store.commit(methodsname);
                    // console.log(this.$store.state.loginstate);
                    // console.log(this.$store.state.loginname);
                    // localStorage.setItem("flag","true");
                    // console.log(localStorage.getItem("flag"));
                    this.$router.push({
                        path: '/'
                    })
                }else{
                    alert("帐号或者密码错误!")
                }
            },
            // 遍历localStorage
            showStorage(){
                for(var i=0;i<localStorage.length;i++){
                    //key(i)获得相应的键，再用getItem()方法获得对应的值
                    console.log(localStorage.key(i),localStorage.getItem(localStorage.key(i)));
                }
                // localStorage.clear();
            },

        }
    }
</script>

<style>
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    input{
        border: 0;
        background: #e8c9b5;
    }
    /*html{
        height: 100%；
    }
    body{
        height: 100%;
    }*/
    #login_box{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        padding-top: .3rem;
        background: #e8c9b5;
    }
    .login_box_title{
        height: 1rem;
        line-height: 1rem;
        padding: 0 .3rem;
        /*background: red;*/
    }
    .login_box_title li{
        float: left;
        margin-right: 1.8rem;
    }
    .login_box_title li:last-of-type{
        margin-right: 0;
    }
    .login_box_title img{
        margin-top: .25rem;
        width: .55rem;

    }
    .login_box_title_lg{
        font-size: .42rem;
        color: #fffff3;
        margin-left: 2rem;
    }
    .login_box_title_register{
        font-size:0.3rem;
        color:#ff8f5c;
        margin-left: 1.7rem;
    }
    .login_box_field_img{
        position: absolute;
        left: .5rem;
    }
    /*.login_box_field_img img{
        width: .5rem;
        margin-top: .2rem;
    }*/
    #login_box_field{
        position: relative;
        margin-top: 1rem;
    }
    .input-left-margin{
        border-bottom: #f9f9f9 solid 1px;
        background: url(http://pub.szzhangchu.com/web/v4.2/images/ico/loginHeadImage.png) no-repeat left center ;
        background-size: .45rem;
        text-indent: .6rem;
        width: 5rem;
        height: 1rem;
        line-height: .5rem;
        margin: 0 0 .3rem .6rem;
        font-size: .45rem;
        color: #fffff3;
        outline: none;
        padding: .3rem 0 0 0;
    }
    .login_box_field input::-webkit-input-placeholder {
        color: #fffff3;
        font-size: .3rem;

    }
    .input-right-margin{
        border-bottom: #fffff3 solid 1px;
        /*text-indent: .6rem;*/
        padding: .3rem 0 0 0;
        width: 5rem;
        height: 1rem;
        line-height: .5rem;
        margin: 0 0 .3rem .6rem;
        font-size: .45rem;
        color: #fffff3;
        outline: none;
    }
    .forgot-password{
        position: relative;
    }
    #login-forgot-password-btn{
        position: absolute;
        right: .5rem;
        font-size:0.3rem;
        color:#ff8f5c;
    }
    .user-login{
        margin-top: 1rem;
        width: 88%;
        height: .8rem;
        line-height: .8rem;
        background: #ff8f5c;
        border-radius: .1rem;
        text-align: center;
        font-size: .4rem;
        color:#fffff3;
    }
    .login_sBox{
        text-align: center;
    }

</style>
